<template>
  <div class="search-container row-center">
    <div class="search row-justify-center">
      <img class="small-icon" src="../assets/img/search.png">
      <input @input="inputChange()" v-model="searchContent" :placeholder="searchTip">
    </div>
  </div>
</template>

<script>
let timer;
export default {
  name: "SearchPart",
  props: ['searchTip'],
  watch: {
    searchContent(newContent) {
    }
  },
  data() {
    return {
      searchContent: ''
    }
  },
  methods: {
    inputChange() {
      const that = this;
      clearTimeout(timer)
      timer = setTimeout(() => {
        that.$emit("parentMethod", that.searchContent)
      }, 500)

    }
  }
}
</script>

<style scoped>
@import "../css/personView/searchview.css";
</style>
